<template>
<div class="idLayout">
    <div class="tagsBox">
        <div>
            <span class="title">酒店名称</span>
            <el-input v-model="tagsValue.name" style="width: 300px;" placeholder="输入要查询的酒店名称"/>
        </div>
        <div>
            <span class="title">所在地区</span>
            <el-cascader
                    size="large"
                    :options="options"
                    v-model="city"
                    @change="handleChange">
            </el-cascader>
        </div>
        <div>
            <span class="title">酒店类型</span>
            <el-select v-model="tagsValue.type" class="m-2" placeholder="Select" size="large">
                <el-option v-for="item in kinds" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
        </div>

        <div class="btn">
            <el-button type="primary" style="width:100%" @click="query">查询</el-button>
            <el-button type="primary" style="width:100%" @click="clear">清空查询</el-button>
        </div>

    </div>

    <el-card style="width:100%">
        <el-table
            ref="multipleTableRef"
            :data="tableData"
            style="width: 100%;border: none; border-radius: 8px"
            v-loading="loading" 
            element-loading-text="loading..." 
            element-loading-background="white"
        >
            <el-table-column  property="imageList" label="酒店图片"  width="250">
                <template #default="scope">
                        <div class="imgBox">
                            <img v-for="(item,index) in scope.row.imageList" :key="item" :style="{ '--i':index }" :src="'/api/hotel/getImage/' + item"/>
                            <span>{{ scope.row.imageList?.length }}</span>
                        </div>
                    </template>
            </el-table-column>
            <el-table-column property="hotel_name" label="酒店名" />
            <el-table-column property="type_name" label="类型" />
            <el-table-column property="score" label="评分" />
            <el-table-column property="code" label="联系电话" />
            <el-table-column property="address" label="详细地址" />
            <el-table-column property="create_time" label="创建时间">
                <template #default="scope">
                    <span>{{ formatYMD(scope.row.create_time) }}</span>
                </template>
            </el-table-column>
            <template #empty>
                    <el-empty description="无数据" />
                </template>
        </el-table>
    </el-card>

    <el-card class="pagination" body-style="padding:0">
        <el-config-provider :locale="zhCn">
            <el-pagination  :page-size="5" 
                            @current-change="changePage"
                            layout="prev, pager, next, jumper" 
                            background 
                            :total="total"
                            prev-text="上一页"
                            next-text="下一页"
                            />
        </el-config-provider>
    </el-card>
</div>
</template>

<script lang="ts" setup>
import { reactive, onBeforeMount, ref } from 'vue'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import { regionData } from 'element-china-area-data'  
import { get } from '@/http/axios' 
import { getCookies } from '@/utils/cookies'
import { useUserInfoStore } from '@/store/userInfoState'
import { ElMessage } from 'element-plus'
import { formatYMD } from '@/utils/format'

type kindsType = {
    id:number
    name:string
}
let tableData = ref()
const tagsValue = reactive({
    city_id:null,
    type:null,
    score: null,
    name: null
})
let id = ref<number | string>()
const kinds = ref<Array<kindsType>>()
let city = ref()
const store = useUserInfoStore()
let loading = ref<boolean>(true)
const options = ref(regionData)
let total = ref<number>(0)
onBeforeMount(() => {
    id.value = store.user?.id?store.user.id:getCookies('id')
    initData()
    getHotelKinds()
})
function initData(pageNum: number = 1) {
    get('/hotel/queryPage',{
        type: tagsValue.type,
        hotel_name: tagsValue.name,
        city_id: tagsValue.city_id,
        pageNum,
        pageSize: 5,
    }).then(res => {
        let timer = setTimeout(() => {
            clearTimeout(timer)
            tableData.value = res.result.content
            total.value = res.result.totalCount
            loading.value = false
        },500)
    }).catch(err => {
        ElMessage.error('订单信息加载失败' + err)
    })
}
function query() {
    loading.value = true
    initData()
}
function handleChange(val:Array<any>){
    tagsValue.city_id = val[val.length - 1]
}
function getHotelKinds() {
    get('/hotelType/queryAll').then(res => {
        kinds.value = res.result
    })
}
function clear(){
    Object.keys(tagsValue).forEach(el => {
        tagsValue[el] = null
    })
    city.value = null
}
function changePage(val:number){
    loading.value = true
    initData(val)
}
</script>

<style lang="scss" scoped>
@import url(../../assets/css/infoKinds.scss);
@import url(../../assets/css/changePagintoin.scss);
.idLayout{
    width: 100%;
    @include flexColumnCenter;
    gap: 2px;
    @include allBack;
}
.paginationBox{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
    border-radius: 8px;
}
.btn{
    width: 350px !important;
}
.imgBox{
    height: 130px;
    position: relative;
    @include flexRowCenter;
    & img{
        width: 70%;
        height: 70%;
        left: calc(10px * var(--i));
        bottom: calc(10px * var(--i));
        position: absolute;
        object-fit: cover;
        border-radius: 4px;
        z-index:  calc(100 - var(--i));
    }
    & img:hover{
        z-index: 199;
    }
    & span:last-child{
        background: rgb(0, 0, 0,0.3);
        padding: 10px 20px;
        border-radius: 4px;
        position: absolute;
        font-size: 25px;
        color: white;
        z-index: 100;
        bottom: 0;
        left: 0;
    }
}
</style>